<template>
  <div class="breadcrumb-container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <!-- <el-breadcrumb-item :to="{ path: '/showView' }">首页</el-breadcrumb-item> -->
      <el-breadcrumb-item v-for="item in BreadcrumbItemList" :key="item.path">
        {{ item.meta.title }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>

export default {
  name: 'BreadCrumbs',
  data() {
    return {
      hasClick: false
    }
  },
  computed: {
    BreadcrumbItemList() {
      return this.$route.matched
    },
  },
  created() {
    console.log("------------------------------")
    console.log(this.$route)
    console.log("------------------------------")
    this.isHome(this.$route.path)
  },
  methods: {
    isHome(path) {
      if (path === '/showView') {
        this.hasClick = false
      } else {
        this.hasClick = true
      }
    },
    goHome() {
      this.$router.push('/showView')
    },
  }
}
</script>

<style lang="less">
.breadcrumb-container {
  display: flex;
  align-items: center;
  padding: 4px 0;
}

.el-breadcrumb {
  font-size: 14px;

  .el-breadcrumb__inner {
    font-size: 14px;
    font-weight: 500;
    color: #fff; // 白色文本
    transition: color 0.3s;

    &:hover {
      color: #FFC107; // 黄色悬停
    }
  }

  .el-breadcrumb__item:last-child .el-breadcrumb__inner {
    color: #FF9800; // 橙色当前页
    font-weight: 600;
  }

  .el-breadcrumb__separator {
    color: #FFC107; // 黄色分隔符
    margin: 0 8px;
  }
}

.home-link {
  font-size: 14px;
  font-weight: 600;
  color: #FF9800; // 橙色首页
  cursor: pointer;

  &:hover {
    text-decoration: underline;
    color: #FFC107; // 黄色悬停
  }
}
</style>
